<script setup>
import ChatItem from "./ChatItem.vue";
import {onMounted, ref} from 'vue'
const activeTavValue = ref('friend')
const groupName = ref('群组名称')
const friendList = ref([
  {
    name: '张三',
    remark: '备注',
    tagName: '我的好友',
    tagClass: 'friend-tag2',
  },
  {
    name: '张三',
    remark: '备注',
    tagName: '多智能体',
    tagClass: 'friend-tag2'
  },

  {
    name: '张三',
    remark: '备注',
    tagName: '单智能体',
    tagClass: 'friend-tag3'
  }
])

const groupList = ref([
  {
    id: 1,
    name: '嘻嘻嘻',
    remark: '备注',
  }
])

/**
 * 好友
 * @type {Ref<UnwrapRef<{type: string}>>}
 */
const friendForm = ref({
  type: '单智能体',
})
const friendDialog = ref(false)
const addFriend = () => {
  friendDialog.value = true
  groupDialog.value = false
}

const groupDialog = ref(false)
const groupForm = ref({
  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg'
})
const uploadAvatar = () => {
  // 手动上传文件
  document.getElementById('avatar').click()

}
const addGroup = () => {
  groupDialog.value = true
  friendDialog.value = false
}
const editGroup = (item) => {
  if (item) {
    groupForm.value = item
    addGroup()
  }
}
const delGroup = (item, index) => {
  console.log(item, index)
}
/**
 * 弹窗
 * @type {Ref<UnwrapRef<null>>}
 */
const groupBtnList = ref([
    '单智能体',
    '多智能体',
    '我的好友',
])
const insertFriend = (item) => {
  console.log(item)
}
const editFriend = (item) => {
  // 关闭其他的
  item.input = true
}
const delFriend = (item, index) => {
  friendList.value.splice(index, 1)
}
const closeDialog = () => {
  friendDialog.value = false
  groupDialog.value = false
}
const myElement = ref(null)
const myElement2 = ref(null)
onMounted(() => {
  document.body.appendChild(myElement.value);
  document.body.appendChild(myElement2.value);
});
</script>

<template>
  <div class="friend-box">
    <div class="friend-tabs">
      <div :class="['friend-tab', activeTavValue === 'friend' ? 'active' : '']" @click="activeTavValue = 'friend'">好友列表</div>
      <div :class="['friend-tab', activeTavValue === 'group' ? 'active' : '']" @click="activeTavValue = 'group'">群组列表</div>
    </div>
    <div v-show="activeTavValue === 'friend'" style="display: flex;align-items: center;justify-content: space-around">
      <div class="custom-button">
        <span>{{ groupName }}</span>
        <img src="@/assets/chat/arrow-down.png" alt="">
      </div>
      <div class="custom-button add-button" @click="addFriend">
      </div>
    </div>
    <div v-show="activeTavValue === 'group'" style="display: flex;align-items: center;justify-content: space-around">
      <div class="custom-button add-group-button" @click="addGroup(null)">
        创建群组
      </div>
    </div>

    <div class="friend-list" v-show="activeTavValue === 'friend'">
      <div class="friend-item" v-for="(item,index) in friendList" :key="item.id">
        <div class="friend-icon">
          <img style="width: 24px;height: 24px" src="@/assets/chat/liuliangbaoguanli@2x.png" alt="">
        </div>
        <div class="friend-content">
          <div class="friend-name">
            <span>{{ item.name }}</span>
            <div>
              <div :class="['friend-tag', item.tagClass]">{{ item.tagName }}</div>
            </div>
          </div>
          <div class="friend-type">
            <input v-if="item.input" type="text" v-model="item.remark" @blur="item.input = false" autofocus>
            <span v-else>{{ item.remark }}</span>
          </div>
        </div>
        <div class="friend-right">
          <img style="width: 12px;height: 12px;margin: 0 15px" src="@/assets/firend/edit.png" alt="" @click="editFriend(item)">
          <img style="width: 12px;height: 12px" src="@/assets/firend/del.png" alt="" @click="delFriend(item,index)">
        </div>
      </div>
    </div>
    <div class="friend-list" v-show="activeTavValue === 'group'">
      <div class="friend-item" v-for="(item,index) in groupList" :key="item.id">
        <div class="friend-icon">
          <img style="width: 24px;height: 24px" src="@/assets/chat/liuliangbaoguanli@2x.png" alt="">
        </div>
        <div class="friend-content">
          <div class="friend-name">
            <span>{{ item.name }}</span>
          </div>
          <div class="friend-type">{{ item.remark }}</div>
        </div>
        <div class="friend-right">
          <img
              @click="editGroup(item)"
              style="width: 12px;height: 12px;margin: 0 15px" src="@/assets/firend/edit.png" alt="">
          <img
              @click="delGroup(item,index)"
              style="width: 12px;height: 12px" src="@/assets/firend/del.png" alt="">
        </div>
      </div>
    </div>
  </div>

  <div v-show="friendDialog" class="friend-form" ref="myElement">
    <ChatItem class="c-item6 un-line" title="添加好友" :icon="require('@/assets/firend/friend.png')" :show-right="false">
      <template v-slot:right>
        <img style="cursor: pointer" src="@/assets/firend/close.png" @click="closeDialog">
      </template>
      <div class="friend-btns">
        <div
            @click="friendForm.type = item"
            :class="['friend-btn', friendForm.type === item ? 'active' : '']" v-for="item in groupBtnList" :key="item">
          {{ item}}
        </div>
      </div>
      <div class="dialog-friend-wrapper">
        <div class="dialog-friend-list">
          <div class="dialog-friend" v-for="item in friendList" :key="item.id">
            <div class="avatar">
              <img style="width: 36px;height: 36px" :src="item.avatar" />
            </div>
            <div class="name">{{ item.name }}</div>
            <img class="add-icon" @click="insertFriend(item)" style="width: 16px;height: 16px" src="@/assets/firend/add.png" alt="">
          </div>
        </div>
      </div>
    </ChatItem>
  </div>
  <div v-show="groupDialog" class="friend-form group-form" ref="myElement2">
    <ChatItem class="c-item6 un-line" title="创建群组" :icon="require('@/assets/firend/edit.png')" :show-right="false">
      <template v-slot:right>
        <img style="cursor: pointer" src="@/assets/firend/close.png" @click="closeDialog">
      </template>
      <div class="group-wrapper">
        <div class="group-box">
          <div class="upload-avatar" @click="uploadAvatar">
            <input type="file" id="avatar">
            <img :src="groupForm.avatar" alt="">
            <div class="camera">
              <img alt="">
            </div>
          </div>
          <div class="input-box">
            <input v-model="groupForm.name" class="input" type="text" placeholder="请输入群组名称" />
          </div>
          <div class="input-box">
            <input v-model="groupForm.remark" class="input" type="text" placeholder="请输入群组名称" />
          </div>
        </div>
        <div class="submit-btn">创建</div>
      </div>
    </ChatItem>
  </div>
</template>

<style lang="scss">
.dark {
  input {
    color: #FFFFFF;
  }
  .friend-box {
    background: #1A1D22;
    border-radius: 8px;
  }
  .friend-tab {
    color: #ffffff;
  }
  .friend-tab.active {
    border-color: #63E2B7;
    color: #63E2B7;
  }
  .custom-button {
    color: #24F2AC;
    background-image: url("~@/assets/firend/group-bg.png");
  }
  .add-group-button {
    background-image: url("~@/assets/firend/group.png");
  }
  .add-button {
    background-image: url("~@/assets/firend/add-bg.png");
  }
  .friend-list {
    .friend-name {
      color: #FFFFFF;
    }
    .friend-type  {
      color: #7B7D80;
    }
    .friend-item {
      border-bottom-color: #7B7D80;
    }
    .friend-tag {
      background: #63E2B7;
      color: #1A1D22;
    }
    .friend-tag2 {
      background: #5AAAE8;
    }
    .friend-tag3 {
      background: #99C6E8;
    }
  }

}
.friend-box {
  img {
    cursor: pointer;
  }
  height: 100%;
  display: flex;
  flex-direction: column;
  padding:6px 15px;
  .friend-list {
    flex-grow: 1;
    padding: 10px;
    padding-top: 0;
    overflow: auto;
    .friend-tag {
      height: 14px;
      line-height: 14px;
      padding: 0 2px;
      border-radius: 2px;
      font-size: 10px;
      margin-left: 12px;
    }
    .friend-icon {
      border-radius: 50%;
      width: 36px;
      height: 36px;
      margin-right: 14px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .friend-item {
      display: flex;
      align-items: center;
      margin: 10px 0;
    }
    .friend-content {
      flex-grow: 1;
      height: 45px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
    }
    .friend-name {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 12px;
      line-height: 20px;
      text-align: left;
      display: flex;
      align-items: center;
    }
    .friend-type {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      line-height: 17px;
      text-align: left;
      input {
        background: transparent;
        border: none;
        outline: none;
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        padding: 0;
      }
    }
    .friend-right {
      flex-shrink: 0;
    }
  }

  .friend-tabs {
    display: flex;
    align-items: center;
  }
  .friend-tab {
    flex: 1;
    padding: 13px 0;
    cursor: pointer;
    text-align: center;
    width: 50%;
    border-bottom: 1px solid transparent;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    font-style: normal;
  }

  .custom-button {
    cursor: pointer;
    width: 40%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 24px 0;
    height: 24px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    font-style: normal;
    border-radius: 4px;
    img {
      margin-left:6px;
      width: 8px;
      height: 8px;
    }
  }

  .add-group-button {
    width: 90%;
  }
}

.dark {
  .friend-btn {
    background: #1A1D22;
    color: rgba(255,255,255,0.42);
    &.active {
      background: #63E2B7;
      color: #ffffff;
    }
  }
  .friend-form {
    .name {
      color: #FFFFFF;
    }
    .c-item {
      .c-item-body {
        background: #24272E !important;
      }
    }
  }
  .group-form {
    .camera {
      background: #000000;
    }
    .input-box {
      background: #24272E;
    }
    .submit-btn {
      background-image: url("~@/assets/firend/group.png");
      color: #ffffff;
    }
  }
}
.friend-form {
  .c-item {
    width: 360px !important;
    margin-top: 0;
    .c-item-body {
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 0;
    }
  }
  position: fixed;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  height: 46px;
  background: linear-gradient( 180deg, #4A4F5B 0%, #24272E 100%);
  border-radius: 8px;

  .friend-btns {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 28px;
    flex-shrink: 0;
    margin: 10px 0 20px 0;
    padding: 0 20px;
    .friend-btn {
      cursor: pointer;
      width: 90px;
      text-align: center;
      margin-right: 16px;
      line-height: 28px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      border-radius: 4px;
      overflow: hidden;
    }
  }

  .dialog-friend-wrapper {
    width: 100%;
    flex-grow: 1;
    overflow: auto;
    padding: 0 20px 20px;
  }
  .dialog-friend-list {
    background: #1A1D22;
    border-radius: 8px;
    padding:0 10px;
    height: 100%;
    .dialog-friend {
      display: flex;
      align-items: center;
      padding: 10px 0;
      .avatar {
        width: 36px;
        height: 36px;
        overflow: hidden;
        border-radius: 50%;
      }
      .name {
        padding: 0 14px;
        // 单行溢出
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        height: 25px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        line-height: 25px;
        text-align: left;
        flex-grow: 1;
      }
      .add-icon {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
  }

}
.group-form {
  .group-wrapper {
    padding: 17px 32px;
    .group-box {
      width: 100%;
      height: 243px;
      background: #1A1D22;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
  .submit-btn {
    width: 288px;
    height: 36px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
    cursor: pointer;
    line-height: 36px;
    text-align: center;
  }
  .upload-avatar {
    margin-bottom: 20px;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background-color: red;
    input {
      display: none;
    }
    .camera {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right:4px;
      bottom: 4px
    }
  }
  .input-box {
    width: 263px;
    height: 36px;
    border-radius: 8px;
    padding: 0 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    // 重置input的样式 全部为none
    input {
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
      outline: none;
      color: #FFFFFF;
    }
  }
}

</style>
